import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const BarChar = ({ title }) => {
  const chartsRef = useRef(null)

  useEffect(() => {
    const chartDom = chartsRef.current;
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: title,
      },
      xAxis: {
        type: 'category',
        data: ['vue', 'angular', 'react']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [50, 60, 70],
          type: 'bar'
        }
      ]
    };
    option && myChart.setOption(option);
  })

  return (
    <div>
      <div ref={chartsRef} style={{height: 400, width: 400}}></div>
    </div>
  )
}

export default BarChar